<template>
    <div class="table-container">

<!--        <el-form :model="queryForm" :inline="true" class="query-form" label-width="80px">-->
<!--           -->
<!--        </el-form>-->

        <div>
            <label>开始时间：</label>

                <el-date-picker
                    v-model="queryForm.time"
                    type="datetimerange"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['00:00:00', '23:59:59']"
                    value-format="yyyy-MM-dd HH:mm:ss"
                />

            <el-button type="primary" @click="handleQuery">查询</el-button>

        </div>

        <!-- 添加饼图容器 -->
        <div ref="chartContainer" style="width: 600px; height: 400px;"></div>

    </div>
</template>

<script>

import {getActive} from "@/api/user"
// 引入 echarts
import * as echarts from "echarts"

export default {
    data() {
        return {
            queryForm: {
                startTime: "",
                endTime: "",
                time: null,
                loading: false
            },
            response: {
                total:0,
                active:0
            },
            // 添加图表实例引用
            chartInstance: null
        }
    },

    // 添加窗口大小改变时重置图表大小
    mounted() {
        window.addEventListener("resize", () => {
            if (this.chartInstance) {
                this.chartInstance.resize();
            }
        });
    },

    // 销毁图表实例
    beforeDestroy() {
        if (this.chartInstance) {
            this.chartInstance.dispose();
            this.chartInstance = null;
        }
    },
    created() {
        // const todayStart = new Date();
        // todayStart.setHours(0, 0, 0, 0);
        // const timestamp = todayStart.getTime();
        //
        //
        // const tomorrow = new Date();
        // tomorrow.setDate(tomorrow.getDate() + 1);
        // tomorrow.setHours(0, 0, 0, 0);
        // const tomorrowTimestamp = tomorrow.getTime();
        // this.queryForm.time = [timestamp, tomorrowTimestamp];
        // this.fetchData();
    },
    methods: {
        async fetchData() {
            if(!this.queryForm.time||this.queryForm.time.length===0){
                this.$message.error("请选择时间范围")
                return;
            }
            this.loading = true
            try {

                const res=await getActive({
                    startTime: this.queryForm.time[0],
                    endTime: this.queryForm.time[1]
                })

                this.response = res

                // 数据获取成功后绘制饼图
                this.$nextTick(() => {
                    this.drawChart();
                })

            } catch (error) {
                // ElMessage.error("数据加载失败")
            } finally {
                this.loading = false
            }
        },

        // 添加绘制饼图的方法
        drawChart() {
            // 初始化图表实例
            if (!this.chartInstance) {
                this.chartInstance = echarts.init(this.$refs.chartContainer);
            }

            // 配置图表选项
            const option = {
                title: {
                    text: "用户活跃度统计",
                    left: "center"
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: "vertical",
                    left: "left"
                },
                series: [
                    {
                        name: "用户统计",
                        type: "pie",
                        radius: "50%",
                        data: [
                            { value: this.response.active, name: "活跃用户" },
                            { value: this.response.total - this.response.active, name: "非活跃用户" }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            }
                        }
                    }
                ]
            };

            // 设置图表配置
            this.chartInstance.setOption(option);
        },

        // 添加查询方法
        handleQuery() {
            this.fetchData();
        }
    }
}

</script>

<style scoped>
.table-container {
    padding: 20px;
}

.query-form {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #f5f7fa;
    border-radius: 4px;
}

.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>
